<template>
  <div class="show-list">
    <van-nav-bar
      title="标题"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="header">
      <img :src="show.cover" alt="" />
      <h3>{{ show.name }}</h3>
      <div class="nick">
        <img :src="show.nickpic" alt="" />
        <span>{{ show.nickname }}</span>
      </div>
    </div>
    <div class="desc">
      <span>{{ show.bodydesc }}</span>
    </div>
    <div class="showsList">
      <span>节目列表(共{{ show.songarray }}首歌曲）</span><br />
      <div v-for="(item, index) in songs" :key="index">
        <div class="list">
          <div>{{ item.name }}</div>
          <div>|{{ item.artists[0].name }}</div>
          <div>|{{ item.album.name }}</div>
        </div>
      </div>
      <li
        v-for="(item, index) in showlist"
        :key="index"
        @click="selectItem(item)"
      ></li>
    </div>
  </div>
</template>
    <script>
export default {
  data() {
    return {
      show: {
        cover: "", //歌单logo
        name: "", //歌单名称
        nickname: "", //主播名字
        nickpic: "", //主播头像
        bodydesc: "", //介绍内容
        songarray: "", //歌曲数量
        songname: "", //歌曲名字
      },
      showlist: [], //歌曲列表
      shownum: 0, //歌曲数量
      list: [],
      artists: [],
      songs: [],
      loading: false,
      finished: false,
    };
  },
  created() {
    this.getShowData();
  },
  methods: {
    getShowData() {
      this.$request("get", "/dj/program/detail", {
        id: this.$route.params.id,
      }).then((res) => {
        console.log(res);
        this.show.cover = res.program.coverUrl;
        this.show.nickname = res.program.dj.nickname;
        this.show.nickpic = res.program.dj.avatarUrl;
        this.show.name = res.program.name;
        this.show.bodydesc = res.program.description;
        this.show.songarray = res.program.trackCount;
        this.songs = res.program.songs;
        this.artists = res.program.songs.artists;
      });
    },
    selectItem(item) {
      const id = item.id;
      console.log(id);
      this.$router.push({
        name: "ShowList",
        params: {
          id: id,
        },
      });
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        this.list = this.list.concat(this.showlist.splice(0, 10));
        // 加载状态结束
        this.loading = false;
        // 数据全部加载完成
        if (this.list.length >= this.shownum) {
          this.finished = true;
        }
      }, 1000);
    },
  },
};
</script>
    <style scoped>
.header > img {
  width: 60%;
}
.nick {
  overflow: hidden;
  display: flex;
  justify-content: center; /**弹性布局内容水平居中 */
  align-items: center; /**弹性布局内容垂直居中 */
  margin-bottom: 1rem;
}
.nick > img {
  width: 2.5rem;
  margin-right: 0.5rem;
}
.nick > span {
  height: 2rem;
  font-size: 1rem;
  line-height: 2rem;
}

.header > span {
  font-size: 0.9rem;
}
.desc {
  padding: 1rem;
  text-align: left;
  text-indent: 2rem;
}
.showsList {
  background-color: #f7f7f7;
}
.list {
  display: flex;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin: 0 1rem;
  padding-bottom: 1rem;
}
.list > div {
  text-align: left;
  width: 33%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-top: 0.7rem;
}
.singer {
  text-align: left;
}
.singer span {
  color: rgb(147, 147, 147);
  font-size: 0.8rem;
}
.singer > span:last-child > span:first-child {
  font-weight: 900;
  padding: 0 0.5rem;
}
</style>